{% extends '@theme/base.html.twig' %}

{% block headerjs %}
<script src="https://www.google.com/recaptcha/api.js"></script>
{% endblock %}

{% block meta %}
{% if offer|offer_older_than(itof.old_offer_days) == true %}
    <meta name="robots" content="noindex">
{% endif %}
    <meta property="og:image" content="{{ url('offer_thumbnail', {'offerSlug': offer.slug}) }}" />
    <meta property="og:url" content="{{ url('offer', {'offerSlug': offer.slug}) }}" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="{{ offer.locale }}" />
    <meta property="og:description" content="The best job offers for IT Specialists" />
    <meta property="fb:app_id" content="{{ facebook.app_id }}" />
    <meta property="og:title" content="{{ offer.company.name }} - {{ offer.position.seniorityLevel|offer_seniority_level_name }} {{ offer.position.name }}" />
{% endblock %}

{% block title %}{{ offer.company.name }} - {{ offer.position.seniorityLevel|offer_seniority_level_name }} {{ offer.position.name }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>
<style type="text/css">
    .specialization-logo img {
        width: 7.5rem;
    }
    #offer-location-map {
        height: 480px;
    }
</style>
{% endblock %}

{% block javascripts %}
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""
></script>
<script>
    $(window.document).ready(function() {
        $('#job-apply').on('click', function(event) {
            event.preventDefault();

            $(this).hide();

            var recaptcha = grecaptcha.render('google-recaptcha', {
                'sitekey' : '{{ google.recaptcha.key }}',
                'theme' : 'light',
                'callback' : function(token) {
                    $('#google-recaptcha').hide();
                    $('#job-apply-info').removeClass('d-none');
                    $.post({
                        url: "{{ url('recaptcha_verify') }}",
                        data: {
                            'google-recaptcha-token': token,
                            'offer-id': '{{ offer.id }}'
                        }
                    }).then(function(response) {
                        if (response.email) {
                            $('#job-apply-info').html('<p>Please send you resume on address: </p> <a target="_blank" href="mailto:' + response.email + '">' + response.email + '</a>');

                        }

                        if (response.url) {
                            $('#job-apply-info').html('<p>Click the button to apply: </p> <a class="btn btn-primary btn-small" target="_blank" href="' + response.url + '">Apply Here</a>');
                        }
                    }).catch(function() {
                        grecaptcha.reset(recaptcha);
                        $('#google-recaptcha').show();
                    });
                }
            });
        });

        $('#job-apply-mobile').on('click', function(event) {
            event.preventDefault();

            $(this).hide();

            var recaptcha = grecaptcha.render('google-recaptcha-mobile', {
                'sitekey' : '{{ google.recaptcha.key }}',
                'theme' : 'light',
                'callback' : function(token) {
                    $('#google-recaptcha-mobile').hide();

                    $('#job-apply-info-mobile').removeClass('d-none');

                    $.post({
                        url: "{{ url('recaptcha_verify') }}",
                        data: {
                            'google-recaptcha-token': token,
                            'offer-id': '{{ offer.id }}'
                        }
                    }).then(function(response) {
                        if (response.email) {
                            $('#job-apply-email-mobile').html('<div class="col-12"> <p>Please send you resume on address: </p> <a target="_blank" href="mailto:' + response.email + '">' + response.email + '</a> </div>');
                            $('#job-apply-mobile').addClass('d-none');
                        }

                        if (response.url) {
                            $('#job-apply-info-mobile').html('<div class="col-12"> <p>Click the button to apply: </p> <a class="btn btn-primary btn-small" target="_blank" href="' + response.url + '">Apply Here</a> </div>');
                        }
                    }).catch(function() {
                        grecaptcha.reset(recaptcha);
                        $('#google-recaptcha-mobile').show();
                    });
                }
            });
        });

        {% if offer.location.partiallyRemote or offer.location.atOffice %}
            var offerLocationMap = L.map('offer-location-map')
                .setView([{{ offer.location.lat|raw }}, {{ offer.location.lng|raw }}], 15);

            L.tileLayer('https://api.maptiler.com/maps/bright/{z}/{x}/{y}.png?key={{ map_tiler.key }}', {
                tileSize: 512,
                zoomOffset: -1,
                minZoom: 1,
                crossOrigin: true
            }).addTo(offerLocationMap);

            L.marker([{{ offer.location.lat|raw }}, {{ offer.location.lng|raw }}])
                .addTo(offerLocationMap)
                .bindPopup('{{ offer.location.address|spaceless|replace({"\n":' ', "\r":' '}) }}')
                .openPopup();

        {% endif %}
    });
</script>
{% endblock %}

{% block header %}
    {{ render_esi(controller('App\\Offers\\Controller\\LayoutController::headerAction', {specialization: offer.specializationSlug})) }}
{% endblock %}


{% block body %}
<div class="container-fluid bg-light pt-4 border-bottom">
    <div class="container">
        {% if offer|offer_older_than(itof.old_offer_days) == true %}
        <div class="alert alert-danger text-center font-weight-bold" data-offer-expired-warning>
            This offer was posted more than {{ itof.old_offer_days }} ago.
            You might want to check latest job offers in <a href="{{ url('specialization_offers', {specSlug: offer.specializationSlug}) }}">{{ specialization.slug|specialization_name }}</a> specialization.
        </div>
        {% endif %}
        <div class="row pb-4 d-none d-lg-flex">
            <div class="col-lg-6 text-left">
                {% if previousOffer %}
                    <a href="{{ url('offer', {'offerSlug': previousOffer.slug}) }}" class="btn btn-link"><img class="offer-previous mr-2" src="/assets/img/icon/svg/arrow-left-blue.svg" alt="Open previous offer"/> Prev</a>
                {% endif %}
            </div>
            <div class="col-lg-6 text-right">
                {% if nextOffer %}
                    <a href="{{ url('offer', {'offerSlug': nextOffer.slug}) }}" class="btn btn-link">Next <img class="offer-next ml-2" src="/assets/img/icon/svg/arrow-right-blue.svg" alt="Open next offer"/></a>
                {% endif %}
            </div>
        </div>
        <div class="row offer-header d-none d-lg-flex">
            <div class="col-lg-2">
                <section class="mb-4 company-logo">
                    {% if offer.company.logo %}
                        <img src="{{ offer.company.logo.url(assets.storage_url) }}" alt="{{ offer.company.name }} - logo">
                    {% else %}
                        {% include '@offers/specialization/_logo.html.twig' with {specialization: offer.specializationSlug} only %}
                    {% endif %}
                </section>
                <section class="text-gray-500 mb-2 small">
                    Created at
                </section>
                <section class="small">
                    {% include '@offers/offer/offer/_created_at.html.twig' with {offer: offer} only %}
                </section>
            </div>
            <div class="col-lg-5">
                <h1 class="font-weight-light mb-4">{{ offer.position.seniorityLevel|offer_seniority_level_name }} {{ offer.position.name }}</h1>
                <h4 class="font-weight-light"><a target="_blank" href="{{ offer.company.url }}">{{ offer.company.name }}</a></h4>
                {% if userId and offer.postedBy(userId)%}
                    <a href="{{ url('offer_remove_confirmation', {offerSlug: offer.slug}) }}" data-remove-offer class="btn btn-danger btn-sm mt-3"><i class="fas fa-times"></i> remove</a>
                    {% if offer|offer_older_than_hours(constant('ITOffers\\Offers\\Application\\Offer\\Offer::INSTANT_EDIT_TIME_HOURS')) == false %}
                        <a class="btn btn-primary btn-sm mt-3" href="{{ url('offer_edit', {specSlug: offer.specializationSlug, 'offer-slug': offer.slug })  }}"><i class="far fa-edit"></i> edit</a>
                    {% else %}
                        <a class="btn btn-primary btn-sm mt-3 disabled" href="#" disabled="disabled"><i class="far fa-edit"></i> edit</a>
                    {% endif %}
                {% endif %}
            </div>
            <div class="col-lg-5"></div>
        </div>
        <div class="row offer-header d-lg-none text-center">
            <div class="col-12">
                <h1 class="font-weight-light mb-2">{{ offer.position.seniorityLevel|offer_seniority_level_name }} {{ offer.position.name }}</h1>
                <h4 class="font-weight-light"><a target="_blank" href="{{ offer.company.url }}">{{ offer.company.name }}</a></h4>
                {% if userId and offer.postedBy(userId)%}
                    <a href="{{ url('offer_remove_confirmation', {offerSlug: offer.slug}) }}" data-remove-offer class="btn btn-danger btn-sm mt-3 mb-3"><i class="fas fa-times"></i> remove</a>
                    {% if offer|offer_older_than_hours(constant('ITOffers\\Offers\\Application\\Offer\\Offer::INSTANT_EDIT_TIME_HOURS')) == false %}
                        <a class="btn btn-primary btn-sm mt-3 mb-3" href="{{ url('offer_edit', {specSlug: offer.specializationSlug, 'offer-slug': offer.slug })  }}"><i class="far fa-edit"></i> edit</a>
                    {% else %}
                        <a class="btn btn-primary btn-sm mt-3 mb-3 disabled" href="#" disabled="disabled"><i class="far fa-edit"></i> edit</a>
                    {% endif %}
                {% endif %}
            </div>
            <div class="col-12">
                <section class="text-gray-500 mb-2 small">
                    Created at
                </section>
                <section class="small">
                    {% include '@offers/offer/offer/_created_at.html.twig' with {offer: offer} only %}
                </section>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="row border-bottom pt-lg-5 pb-lg-4 pt-2 pb-2">
                    <div class="col-lg-3 col-12">
                        <h4 class="offer-description-headline mb-4">Job Description</h4>
                        {% if offer.offerPDF %}
                            <p>
                                <a href="{{ offer.offerpdf.url(assets.storage_url) }}" download><i class="fas fa-file-alt mr-2 text-green"></i> Download in PDF</a>
                            </p>
                        {% endif %}
                    </div>
                    <div class="col-lg-9 col-12">
                        <div class="row">
                            <div class="col-lg-6 mb-4">
                                <h6 class="small text-gray-500">Job Type</h6>
                                <small><i class="text-green fas fa-file-alt mr-2"></i> {{ offer.contract.type }}</small>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <h6 class="small text-gray-500">Work Type</h6>
                                {% spaceless %}
                                <small>
                                    <i class="text-green fas fa-laptop-code mr-2"></i>
                                    {% if offer.location.partiallyRemote %}
                                        Partially Remote
                                    {% elseif offer.location.atOffice %}
                                        At Office
                                    {% else %}
                                        Remote
                                    {% endif %}
                                </small>
                                {% endspaceless %}
                            </div>
                            <div class="col-lg-6 mb-4">
                                <h6 class="small text-gray-500">Seniority Level</h6>
                                <small><i class="text-green fas fa-layer-group mr-2"></i> {{ offer.position.seniorityLevel|offer_seniority_level_name }}</small>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <h6 class="small text-gray-500">Position</h6>
                                <small>{{ offer.position.name }}</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom pt-5 pb-4">
                    <div class="col-lg-3">
                        <h4 class="offer-description-headline">Requirements</h4>
                    </div>
                    <div class="col-lg-8">
                        {% if offer.description.requirements.requiredSkills|length %}
                        <div class="row">
                            <div class="col-lg-12">
                                <h6 class="text-gray-500 small">Must have</h6>
                            </div>
                            {% if offer.description.requirements.requiredSkills|length > 1  %}
                                <div class="col-lg-6">
                                    <ul>
                                        {% for skill in offer.description.requirements.requiredSkills | slice(0, offer.description.requirements.requiredSkills|length / 2) %}
                                            <li>{{ skill.name }}{% if skill.experienceYears %} <span class="text-gray-500">({{ skill.experienceYears }}+ years)</span>{% endif %}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="col-lg-6">
                                    <ul>
                                        {% for skill in offer.description.requirements.requiredSkills | slice(offer.description.requirements.requiredSkills|length / 2) %}
                                            <li>{{ skill.name }}{% if skill.experienceYears %} <span class="text-gray-500">({{ skill.experienceYears }}+ years)</span>{% endif %}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% else %}
                            <div class="col-lg-12">
                                <ul>
                                    {% for skill in offer.description.requirements.requiredSkills %}
                                        <li>{{ skill.name }}{% if skill.experienceYears %} <span class="text-gray-500">({{ skill.experienceYears }}+ years)</span>{% endif %}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% if offer.description.requirements.niceToHaveSkills|length %}
                        <div class="row">
                            <div class="col-lg-12">
                                <h6 class="text-gray-500 small">Nice to have</h6>
                            </div>
                            {% if offer.description.requirements.niceToHaveSkills|length > 1 %}
                                <div class="col-lg-6">
                                    <ul>
                                        {% for skill in offer.description.requirements.niceToHaveSkills | slice(0, offer.description.requirements.niceToHaveSkills|length / 2) %}
                                            <li>{{ skill.name }}{% if skill.experienceYears %} <span class="text-gray-500">({{ skill.experienceYears }}+ years)</span>{% endif %}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="col-lg-6">
                                    <ul>
                                        {% for skill in offer.description.requirements.niceToHaveSkills | slice(offer.description.requirements.niceToHaveSkills|length / 2) %}
                                            <li>{{ skill.name }}{% if skill.experienceYears %} <span class="text-gray-500">({{ skill.experienceYears }}+ years)</span>{% endif %}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% else %}
                            <div class="col-lg-12">
                                <ul>
                                    {% for skill in offer.description.requirements.niceToHaveSkills %}
                                        <li>{{ skill.name }}{% if skill.experienceYears %} <span class="text-gray-500">({{ skill.experienceYears }}+ years)</span>{% endif %}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% if offer.description.requirements.requiredSkills|length or offer.description.requirements.niceToHaveSkills|length  %}
                        <hr />
                        {% endif %}
                        {{ offer.description.requirements.description | striptags('<strong><em><ul><li><ol><br>') | raw }}
                    </div>
                </div>
                {% if offer.description.technologyStack|length %}
                <div class="row border-bottom pt-5 pb-4">
                    <div class="col-lg-3">
                        <h4 class="offer-description-headline">Technology Stack</h4>
                    </div>
                    <div class="col-lg-9">
                        {{ offer.description.technologyStack | striptags('<strong><em><ul><li><ol><br>') | raw }}
                    </div>
                </div>
                {% endif %}
                <div class="row border-bottom pt-5 pb-4">
                    <div class="col-lg-3">
                        <h4 class="offer-description-headline">Benefits</h4>
                    </div>
                    <div class="col-lg-9">
                        {{ offer.description.benefits | striptags('<strong><em><ul><li><ol><br>') | raw }}
                    </div>
                </div>
                <div class="row pt-5 pb-4">
                    <div class="col-lg-3">
                        <h4 class="offer-description-headline">Company</h4>
                    </div>
                    <div class="col-lg-9">
                        <div class="row border-bottom">
                            <div class="col-lg-6 mb-4">
                                <h6 class="small text-gray-500 font-weight-light">Name</h6>
                                <small>{{ offer.company.name }}</small>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <h6 class="small text-gray-500 font-weight-light">Website</h6>
                                <a target="_blank" href="{{ offer.company.url }}">{{ offer.company.url }}</a>
                            </div>
                        </div>
                        <div class="row {% if offer.location.partiallyRemote or offer.location.atOffice %}border-bottom{% endif %}">
                            <div class="col-lg-12 pb-4 pt-4">
                                <section>
                                {{ offer.company.description | striptags('<strong><em><ul><li><ol><br>') | raw }}
                                </section>
                            </div>
                        </div>
                        {% if offer.location.partiallyRemote or offer.location.atOffice %}
                        <div class="row">
                            <div class="col-lg-12 pb-4 pt-4">
                                <h6 class="small text-gray-500 font-weight-light">Location</h6>
                                <small><i class="text-green fas fa-map-marker-alt mr-2"></i> {{ offer.location.countryCode|offer_location_country_name }}, {{ offer.location.city }}</small>
                                <section class="mt-4 d-none d-lg-block">
                                    <div id="offer-location-map"></div>
                                </section>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <section id="offer-sticky">
                    <div class="card d-none d-lg-block">
                        <div class="card-body pl-5 pr-5 pt-4 border-bottom">
                            <div class="card-title text-center">
                                <h5 class="font-weight-light">{{ offer.position.seniorityLevel|offer_seniority_level_name }} {{ offer.position.name }}</h5>
                            </div>
                            <p class="text-center">
                                <a target="_blank" href="{{ offer.company.url }}">{{ offer.company.name }}</a>
                            </p>
                            {% if offer.salary %}
                                <section class="text-center">
                                    <h5 class="font-weight-bold">{{ offer.salary.currencyCode }} {{ offer.salary.min|offer_salary_integer }} - {{ offer.salary.max|offer_salary_integer }}</h5>
                                    <h5>{% if offer.salary.isNet %}net{% else %}gross{% endif %} per {{ offer.salary.periodType }}</h5>
                                </section>
                            {% endif %}

                            <section class="text-center mt-5">
                                <div id="job-apply-info" class="d-none">
                                    Loading...
                                </div>
                                <section id="google-recaptcha"></section>
                                <button class="btn btn-primary btn-block btn-lg p-3" id="job-apply">Apply</button>
                            </section>
                        </div>
                        <div class="card-body border-bottom small pl-5 pr-5">
                            <i class="text-green fas fa-map-marker-alt mr-2"></i> {% if offer.location.partiallyRemote or offer.location.atOffice %}{{ offer.location.countryCode|offer_location_country_name }}, {{ offer.location.city }}{% else %}Remote{% endif %}
                        </div>
                        <div class="card-body small font-weight-light pl-5 pr-5">
                            <div class="row">
                                <div class="col-lg-6">
                                    {% include '@offers/offer/offer/_created_at.html.twig' with {offer: offer} only %}
                                </div>
                                <div class="col-lg-6 text-right">
                                    {% if facebookPost %}
                                        <a href="{{ facebookPost.id|fb_group_post }}" class="d-block"><i class="fab fa-facebook"></i> group/{{ offer.specializationSlug }}</a>
                                    {% endif %}

                                    {% if tweet %}
                                        <a href="{{ tweet.url(specialization) }}" class="d-block"><i class="fab fa-twitter"></i> @{{ specialization.twitterChannel.screenName }}</a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tags" class="pt-4 text-right d-none d-lg-block">
                        <section>
                            <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">{{ offer.specializationSlug|specialization_name }}</span>
                            <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">{{ offer.position.seniorityLevel|offer_seniority_level_name }}</span>
                            <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">{{ offer.contract.type }}</span>
                            {% if offer.location.partiallyRemote %}
                                <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">Partially Remote</span>
                            {% elseif offer.location.atOffice %}
                                <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">At Office</span>
                            {% else %}
                                <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">Remote</span>
                            {% endif %}
                            {% if offer.salary %}
                            <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">{{ offer.salary.currencyCode }}</span>
                            <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">Per {{ offer.salary.periodType|capitalize }}</span>
                            <span class="badge badge-pill pt-2 pb-2 pl-3 pr-3 border text-gray-800 font-weight-light mb-2 mr-1">{% if offer.salary.net %}Net{% else %}Gross{% endif %}</span>
                            {% endif %}
                        </section>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
<div class="fixed-bottom d-md-none bg-light p-4">
    <div class="row align-content-center" id="job-apply-mobile-info">
        <div class="col-12">
            <section id="google-recaptcha-mobile"></section>
        </div>
        <div class="col-6">
            {% if offer.salary %}
                <strong>{{ offer.salary.currencyCode }} {{ offer.salary.min|offer_salary_integer_short }} - {{ offer.salary.max|offer_salary_integer_short }}</strong>
            {% endif %}
        </div>
        <div class="col-6">
            <button class="btn btn-primary btn-block btn-sm" id="job-apply-mobile">Apply</button>
        </div>
    </div>
    <div class="row d-none text-center" id="job-apply-info-mobile">

    </div>
</div>
{% endblock %}